.top-line:before{content: '';position: absolute;left: 0;right: 0;top: 0;height: 1px;background-color: #dcdcdc;
    display: block;z-index: 15;-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;transform: scale(1,.5);-webkit-transform: scale(1,.5);
}
.bottom-line:after{content: '';position: absolute;left: 0;bottom: 0;right: auto;top: auto;height: 1px;width: 100%;background-color: #dcdcdc;
    display: block;z-index: 15;-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;transform: scale(1,.5);-webkit-transform: scale(1,.5);
}
body{max-width: 640px;margin: 0 auto;background-color: #fff;}

.header{width: 100%;height: 50px;position: relative;color: #fff;}
.header-fixed{position: fixed;width: 100%;left: 0;top: 0;background-color: #ffc10c;height: 50px;
    line-height: 50px;z-index: 100;font-size: 18px;}
.header .right a{color: #fff;}
.header1 .left{float: left;width: 70px;text-align: center;font-size: 14px;}
.header1 .center{float: left;position: absolute;left: 70px;top: 0;right: 50px;height: 50px;}
.header1 .center a{display: block;background-color: #fff;color: #999;font-size: 14px;
    height: 36px;line-height: 36px;margin-top: 7px;overflow: hidden;border-radius: 4px;}
.header1 .center a i{font-size: 24px;float: left;color: #999;margin-left: 5px;}
.header1 .center a span{float: left;}
.header1 .right{float: right;width: 50px;text-align: center;}
.header1 .right a i{color: #fff;font-size: 24px;}

.header2 .left{float: left;width: 50px;text-align: center;font-size: 14px;}
.header2 .left a{display: block;}
.header2 .left a i{font-size: 22px;color: #fff;}
.header2 .center{position: absolute;left: 50px;top: 0;right: 50px;height: 50px;text-align: center;font-size: 18px;}
.header2 .right{float: right;width: 50px;text-align: center;font-size: 14px;}
.header2 .right a{display: block;}
.header2 .right a i{font-size: 26px;color: #fff;}

/*开关按钮*/
.aui-switch {
    height: 26px;
    position: relative;
    border: 1px solid #dddddd;
    background-color: #b5b5b5;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    border-radius: 13px;
    background-clip: content-box;
    display: inline-block;
    -webkit-appearance: none;
    user-select: none;
    outline: none;
    transition: border cubic-bezier(0, 0, 0, 1) 0.2s,
    box-shadow cubic-bezier(0, 0, 0, 1) 0.2s;
    -webkit-transition: border cubic-bezier(0, 0, 0, 1) 0.2s,
    box-shadow cubic-bezier(0, 0, 0, 1) 0.2s;
}
.aui-switch1{width: 86px;}
.aui-switch2{width: 64px;}
.aui-switch3{width: 46px;}
.aui-switch:before {
    width: 24px;
    height: 24px;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    border-radius: 13px;
    background-color: #737373;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    content: '';
    -webkit-transition: left 0.2s;
    transition: left 0.2s;
}
.aui-switch:after{
    content: '';
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 24px;
    text-align: center;
    color: #fff;
    -webkit-transition: left 0.2s;
    transition: left 0.2s;
}
.aui-switch1:after{
    width: 50px;
}
.aui-switch2:after{
    width: 30px;
}
.aui-switch:checked {
    border-color: #ffc008;
    box-shadow: #ffc008 0 0 0 26px inset;
    background-color: #ffc008;
    transition: border ease 0.2s,
    box-shadow ease 0.2s,
    background-color ease 0.6s;
    -webkit-transition: border ease 0.2s,
    box-shadow ease 0.2s,
    background-color ease 0.6s;
}
.aui-switch1:checked:before {
    left: 60px;
    background-color: #f69802;
    -webkit-transition: left 0.2s;
    transition: left 0.2s;
}
.aui-switch1:checked:after {
    left: 12px;
    -webkit-transition: left 0.2s;
    transition: left 0.2s;
}
.aui-switch2:checked:before {
    left: 40px;
    background-color: #f69802;
    -webkit-transition: left 0.2s;
    transition: left 0.2s;
}
.aui-switch2:checked:after {
    left: 10px;
    -webkit-transition: left 0.2s;
    transition: left 0.2s;
}
.aui-switch3:checked:before {
    left: 20px;
    background-color: #f69802;
    -webkit-transition: left 0.2s;
    transition: left 0.2s;
}

/*弹出框*/
.mask{position: fixed;z-index: 1999;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.3);visibility: hidden;}
.modal{position: fixed;z-index: 99999;width: 100%;height: 100%;left: 0;top: 0;display: table;visibility: hidden;}
.modal-inner{display: table-cell;vertical-align: middle;}
.modal-box{width: 270px;background-color: #fff;margin: -25px auto 0;border-radius: 4px;overflow: hidden;box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);}
.modal .m-title{line-height: 40px;color: #fff;background-color: #ffc10c;padding: 0 10px;font-size: 15px;}

.modal .m-btn{padding: 20px;display: -webkit-box;display: box;}
.modal .m-btn div{color: #fff;font-size: 13px;line-height: 30px;-webkit-box-flex: 1;box-flex: 1;
    text-align: center;border-radius: 4px;}
.modal .m-btn .sure{background-color: #ffc10c;}
.modal .m-btn .cancel{background-color: #b5b5b5;margin-left: 10px;}
.mask-open{animation: mask-open .4s ease;-webkit-animation: mask-open .4s ease;visibility: visible;}
.mask-close{animation: mask-close .4s ease;-webkit-animation: mask-close .4s ease;}

.modal-open{animation: modal-open .4s ease;-webkit-animation: modal-open .4s ease;visibility: visible;}
.modal-close{animation: modal-close .4s ease;-webkit-animation: modal-close .4s ease;}
@keyframes mask-open {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-webkit-keyframes mask-open {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes mask-close {
    0%{
        opacity: 1;
        visibility: visible;
    }
    100%{
        opacity: 0;
        visibility: hidden;
    }
}
@-webkit-keyframes mask-close {
    0%{
        opacity: 1;
        visibility: visible;
    }
    100%{
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes modal-open {
    0%{
        opacity: 0;
        transform: scale(1.2,1.2);
        -webkit-transform: scale(1.2,1.2);
    }
    100%{
        opacity: 1;
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
    }
}
@-webkit-keyframes modal-open {
    0%{
        opacity: 0;
        transform: scale(1.2,1.2);
        -webkit-transform: scale(1.2,1.2);
    }
    100%{
        opacity: 1;
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
    }
}
@keyframes modal-close {
    0%{
        opacity: 1;
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
        visibility: visible;
    }
    100%{
        opacity: 0;
        transform: scale(0.8,0.8);
        -webkit-transform: scale(0.8,0.8);
        visibility: hidden;
    }
}
@-webkit-keyframes modal-close {
    0%{
        opacity: 1;
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
        visibility: visible;
    }
    100%{
        opacity: 0;
        transform: scale(0.8,0.8);
        -webkit-transform: scale(0.8,0.8);
        visibility: hidden;
    }
}

/*底部弹出框*/
.slide-up{animation: slide-up .4s ease;-webkit-animation: slide-up .4s ease;visibility: visible !important;}
.slide-down{animation: slide-down .4s ease;-webkit-animation: slide-down .4s ease;}
@keyframes slide-up {
    0%{
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }
    100%{
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}
@-webkit-keyframes slide-up {
    0%{
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }
    100%{
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}
@keyframes slide-down {
    0%{
        visibility: visible;
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
    100%{
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
        visibility: hidden;
    }
}
@-webkit-keyframes slide-down {
    0%{
        visibility: visible;
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
    100%{
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
        visibility: hidden;
    }
}
/*模糊动画*/
.filter{
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=0,   MakeShadow=false);   /*  IE6~IE9  */}
